<template>
  <div class="dropdownBox">
    <div class="dropdown-btn">
      {{title}}
      <div class="dropdown-box">
        <div class="dropdown-box-item" :class="item.disabled?'disabled':''" v-for="(item,index) in dropList"
             :key="index" @click="dropClick(item)">
          {{item.name}}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	export default {
		name: "dropdownBox",
		props: {
			title: {
				type: String,
				default: () => {
				}
			},
			/**
			 * drop:[{name:'例子',type:'ex',disabled:false}]
			 */

			dropList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				showDrop: false
			};
		},
		computed: {},
		watch: {},
		components: {},
		methods: {
			dropClick(data) {
				if(!data.disabled)
				  this.$emit('dropdown', data)
			},
		},
		mounted() {
		},
		created() {
		}
	}
</script>

<style scoped lang="less">
  @import "../../style/common/base";

  @disabledColor: #f5f7fa;
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  .dropdownBox {
    .dropdown-btn {
      position: relative;
      padding: 7px 16px;
      border-radius: 4px;
      background: @allWhite;
      color: @fontColor;
      font-size: 14px;
      line-height: 20px;
      font-weight: 400;
      border: 1px solid @borderGrayColor;
    }

    .dropdown-btn:hover {
      border-radius: 4px 4px 0px 0px;
      border-color: @allPrimaryColor;
      background: @allPrimaryColor;
      color: @allWhite;
      cursor: pointer;
    }

    .dropdown-btn:hover .dropdown-box {
      animation: fadeIn .5s;
      display: block;
    }

    .dropdown-box {
      display: none;
      position: absolute;
      left: 0;
      top: 35px;
      z-index: 999;
      width: 100%;
      height: auto;
      border-radius: 0 0 4px 4px;
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
      animation: fadeOut .5s;
      display: none;

      &-item {
        font-size: 12px;
        font-weight: 400;
        color: @fontColor;
        line-height: 17px;
        text-align: center;
        background: @allWhite;
        padding: 12px 0;
      }

      &-item:hover {
        cursor: pointer;
        color: @allPrimaryColor;
        background: rgb(204, 228, 254);
      }

      &-item:last-child {
        border-radius: 0 0 4px 4px;
      }

      &-item.disabled {
        cursor: not-allowed;
        background: @disabledColor;
        color: @fontGrayColor;

        &:hover {
          opacity: 1;
        }
      }


    }

  }
</style>
